<template>
  <div class="container booking-detail">
    <!-- <cube-scroll> -->
    <div class="section section1 clearfix" :class="{'heights':detail.order_status!=1}">
      <div class="top clearfix">
        <span class="left">预约编号：{{detail.order_sn}}</span>
        <span class="right">{{detail.order_status==1?"正在预约":"预约已关闭"}}</span>
      </div>
      <div class="bottom clearfix">
        <div class="left">
          <img :src="imgUrl+detail.project_image" alt />
        </div>
        <div class="right">
          <div class="content">
            <h3>{{detail.project_name}}</h3>
            <p>{{detail.hospital_name}}</p>
          </div>
        </div>
      </div>
      <router-link
        :to="detail.appointment_type==1?`/cardCancel:${detail.id}`:''"
        class="cancel-btn"
        :class="{'frs':detail.order_status!=1}"
        v-if="detail.appointment_type==1"
      >核销卡券</router-link>

      <router-link
        :to="detail.appointment_type==2?`/cardCancel:${detail.id}`:''"
        class="cancel-btn"
        :class="{'frs':detail.order_status!=1}"
        v-if="detail.appointment_type==2"
      >核销卡券</router-link>

      <router-link
        :to="detail.appointment_type==3?`/cardCancel:${detail.id}`:''"
        class="cancel-btn"
        :class="{'frs':detail.order_status!=1}"
        v-if="detail.appointment_type==3"
      >核销卡券</router-link>
      <!-- s18 -->
      <router-link
        :to="detail.appointment_type==11?`/cardCancel:${detail.id}`:''"
        class="cancel-btn"
        :class="{'frs':detail.order_status!=1}"
        v-if="detail.appointment_type==11"
      >核销卡券</router-link>
      <router-link
        v-if="detail.order_status==1"
        :to="detail.order_status==1?`/bookingDelete:${detail.id}_${detail.type}_${detail.hospital_id}_${detail.order_sn}_${detail.appointment_type}`:''"
        class="delete-btn"
      >关闭预约单</router-link>
    </div>
    <div class="section section2">
      <div class="section-item">
        <div class="left">预约日期：</div>
        <div class="right">
          <p>{{detail.order_time}}</p>
        </div>
      </div>

      <!-- 此处修改 -->
      <!-- <div class="section-item" v-if="detail.type>3">
        <div class="left">
          项目类型：
        </div>
        <div class="right" :class="{'orange-font':detail.type<6,'red-font':detail.type==6}">
          {{ detail.type<6 ? "秒杀" : "全款"}}
        </div>
      </div>-->
      <div class="section-item" v-if="detail.type>3">
        <div class="left">项目类型：</div>
        <!-- <div
          class="right"
          :class="{'orange-font':detail.type<6,'red-font':detail.type==6}"
        >{{ detail.type< 6 ? "秒杀" : "全款"}}</div>-->
        <div
          class="right"
          :class="{'orange-font':detail.type<6,'red-font':detail.type==6}"
        >{{ detail.type>= 6 ? "全款" : "秒杀"}}</div>
      </div>
      <div class="section-item" v-if="detail.appointment_type!=0">
        <div class="left">项目类型：</div>
        <div class="right"></div>
        <!-- 0 普通预约单  1 女王卡 2 青春卡  3 轻颜卡-->
        <!-- <div class="queenCardLogo" v-if="detail.appointment_type==0">
          <span class="queenCardLogoItem">普通预约单</span>
        </div>-->
        <div class="queenCardLogo" v-if="detail.appointment_type==1">
          <span class="queenCardLogoItem">女王卡预约</span>
        </div>
        <div class="queenCardLogo" v-if="detail.appointment_type==2">
          <span class="queenCardLogoItem">青春卡预约</span>
        </div>
        <div class="queenCardLogo" v-if="detail.appointment_type==3">
          <span class="queenCardLogoItem">轻颜卡预约</span>
        </div>
        <div class="queenCardLogo" v-if="detail.appointment_type==10">
          <span class="queenCardLogoItem">邀请有礼</span>
        </div>
        <div class="cardbtns" v-if="detail.appointment_type==11 && detail.c2c_goods_name">
          {{detail.c2c_goods_name}}
          <!-- <span class="queenCardLogoItem" v-if="detail.c2c_goods_name">{{detail.c2c_goods_name}}</span> -->
        </div>
      </div>
      <!-- 结束 -->

      <div class="section-item" v-if="detail.type==2">
        <div class="left">预约类型：</div>
        <div class="right">
          {{detail.order_type==0?'未知':''}}
          {{detail.order_type==1?'首次咨询':''}}
          {{detail.order_type==2?'复诊':''}}
          {{detail.order_type==3?'签订合同':''}}
          {{detail.order_type==4?'进行医美项目':''}}
          {{detail.order_type==5?'其他':''}}
          {{detail.order_type==6?'再消费':''}}
          {{detail.order_type==7?'复查':''}}
        </div>
      </div>
      <div class="section-item">
        <div class="left">上级姓名：</div>
        <div class="right">{{detail.server_name}}</div>
      </div>
      <div class="section-item">
        <div class="left">上级手机：</div>
        <div class="right">
          <a :href="'tel:'+detail.server_phone">{{detail.server_phone}}</a>
        </div>
      </div>
    </div>
    <div class="section section3">
      <div class="section-item">
        <div class="left">客户姓名：</div>
        <div class="right" v-if="detail.user">{{detail.user.realname}}</div>
        <div class="right" v-else></div>

        <div class="member" v-if="detail.is_from_member">
          <span>369会员</span>
        </div>
      </div>
      <div class="section-item">
        <div class="left">客户手机：</div>
        <div class="right" v-if="detail.user">
          <a :href="'tel:'+detail.user.username">{{detail.user.username}}</a>
        </div>
        <div class="right" v-else></div>
      </div>
      <div class="section-item">
        <div class="left">年&nbsp;&nbsp;&nbsp;&nbsp;龄：</div>
        <div class="right" v-if="detail.user">{{detail.user.age}}</div>
        <div class="right" v-else></div>
      </div>
      <div class="section-item">
        <div class="left">性&nbsp;&nbsp;&nbsp;&nbsp;别：</div>
        <div class="right" v-if="detail.user">{{detail.user.sex==1?'男':'女'}}</div>
        <div class="right" v-else></div>
      </div>
      <div class="section-item">
        <div class="left">职&nbsp;&nbsp;&nbsp;&nbsp;业：</div>
        <div class="right" v-if="detail.user">{{detail.user.workplace}}</div>
        <div class="right" v-else></div>
      </div>
      <div class="section-item" v-if="detail.type==2">
        <div class="left">性格特点：</div>
        <br />
        <div class="right">{{detail.user_nature}}</div>
      </div>
      <div class="section-item" v-if="detail.type==2">
        <div class="left">用户关注点：</div>
        <div class="right">
          <!-- <cube-radio-group v-model="detail.user_concern" :options="options" /> -->
          <cube-checkbox-group v-model="selected" :options="options" :hollow-style="true" />
        </div>
      </div>
      <div class="section-item" v-if="detail.type==2">
        <div class="left">曾咨询医院：</div>
        <div class="right">{{detail.know_hospitals}}</div>
      </div>
      <div class="section-item" v-if="detail.type==2">
        <div class="left">曾做过的医美项目：</div>
        <br />
        <div class="right">{{detail.done_project}}</div>
      </div>
      <div class="section-item" v-if="detail.type==2">
        <div class="left">经济自主权：</div>
        <div class="right">{{detail.auto_economic}}</div>
      </div>
      <div class="section-item" v-if="detail.type==2">
        <div class="left">经济实力：</div>
        <div class="right">{{detail.power_economic}}</div>
      </div>
      <div class="section-item" v-if="detail.type==2">
        <div class="left">铺垫项目：</div>
        <div class="right">{{detail.follow_project}}</div>
      </div>
      <div class="section-item" v-if="detail.type==2">
        <div class="left">铺垫程度：</div>
        <div class="right">{{detail.follow_level}}%</div>
      </div>
      <div class="section-item" v-if="detail.type==2">
        <div class="left">预计消费：</div>
        <div class="right">{{expect_money[detail.expect_free-1]}}</div>
      </div>
    </div>

    <!-- 提交预约单时的备注 -->
    <div class="section section3 clearfix" v-if="detail.submit_remark !=''">
      <div class="remark" v-if="detail.submit_remark!=''">
        <div class="title">预 约 备 注：</div>
        <div class="notice">{{detail.submit_remark}}</div>
      </div>
    </div>

    <div class="section section3 clearfix">
      <div class="section-item" v-if="detail.project_allprice>0">
        <div class="left">支 付 金 额：</div>
        <div class="right">{{detail.project_allprice}}</div>
      </div>
      <div class="section-item" v-if="detail.created_at!=''">
        <div class="left">支 付 时 间：</div>
        <div class="right">{{detail.created_at}}</div>
      </div>
      <div class="section-item" v-if="detail.consult!=''">
        <div class="left">咨 询 结 果：</div>
        <div class="right">
          {{detail.consult==1?'仅咨询 ，无意向':''}}
          {{detail.consult==2?'有意向，客户在考虑':''}}
          {{detail.consult==4?'签订合同并付款':''}}
          {{detail.consult==5?'完成医美项目':''}}
          {{detail.consult==6?'客户未到院':''}}
          {{detail.consult==16?'客户已交定金':''}}
          {{detail.consult==11?'更改预约时间':''}}
          {{detail.consult==12?'签订合同并完成项目':''}}
          {{detail.consult==14?'其他':''}}
          {{detail.consult==15?'系统自动关闭':''}}
          {{detail.consult==17?'客户不消费，申请退款':''}}
          {{detail.consult==18?'体验活动，且不关联流水单':''}}
          {{detail.consult==19?'复查':''}}
          {{detail.consult==20?'其他':''}}
          {{detail.consult==21?'活动核销':''}}
          {{detail.consult==22?'邀请有礼核销':''}}
        </div>
      </div>
      <div class="section-item" v-if="detail.deposit!=''">
        <div class="left">定 金 金 额：</div>
        <div class="right">{{detail.deposit}}</div>
      </div>

      <div class="section-item" v-if="detail.doctor_name !=''">
        <div class="left">咨 询 医 生：</div>
        <div class="right">{{detail.doctor_name }}</div>
      </div>

      <div class="remark" v-if="detail.remark!=''">
        <div class="title">备 注：</div>
        <div class="notice1">{{detail.remark}}</div>
        <!-- <div class="notice">{{detail.remark}}</div> -->
      </div>
    </div>
    <!-- </cube-scroll> -->
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import api from "../../assets/js/api";
export default {
  data() {
    return {
      selected: [],
      options: [
        {
          label: "效果",
          value: "1",
          disabled: true
        },
        {
          label: "价格",
          value: "2",
          disabled: true
        },
        {
          label: "环境",
          value: "3",
          disabled: true
        },
        {
          label: "服务",
          value: "4",
          disabled: true
        }
      ],
      detail: {},
      bookingType: [
        "未知",
        "首次咨询",
        "复诊",
        "签订合同",
        "进行医美项目",
        "其他"
      ],
      expect_money: ["1万以下", "1~5万", "6~10万", "11~20万", "20万以上"]
    };
  },
  methods: {
    getData() {
      let id = location.hash.split(":")[1];
      let dataLoading = this.loading("加载中", 10000);
      dataLoading.show();
      this.axios
        .post("/api/butler/order_detail", {
          order_id: id
        })
        .then(response => {
          let res = response.data;
          dataLoading.hide();
          if (res.code == 200) {
            this.detail = res.data;
            this.detail.order_time = new Date(
              this.detail.order_time * 1000
            ).Format("yyyy-MM-dd");
            this.detail.created_at = new Date(
              this.detail.created_at * 1000
            ).Format("yyyy-MM-dd hh:mm:ss");
            if (
              this.detail.user_concern &&
              this.detail.user_concern.length > 2
            ) {
              let arr = this.detail.user_concern.split("#");
              this.selected = arr;
            } else {
              this.selected.push(this.detail.user_concern);
            }
          } else if (res.code == 250) {
            Toast({
              message: "登录过期，请重新登陆",
              position: "bottom",
              duration: 2000
            });
            this.$router.push("/login");
            return false;
          } else {
            Toast({
              message: res.msg,
              position: "bottom",
              duration: 2000
            });
            return false;
          }
        })
        .catch(error => {
          console.log(error);
          dataLoading.hide();
          Toast({
            message: "请求失败，请稍后重试",
            position: "bottom",
            duration: 2000
          });
        });
    }
  },
  created() {
    this.axios.defaults.baseURL = api;
    document.title = "预约单详情";
    this.getData();
  }
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  overflow-y: auto;
  background-color: rgba(204, 204, 204, 0.2018);
  .section {
    width: 100%;
    margin-bottom: 10px;
    padding: 0 15px;
    background-color: #fff;
  }
  .section1 {
    position: relative;
    padding-bottom: 15px;
    .top {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid rgba(204, 204, 204, 0.2999);
      color: #666;
      .left,
      .right {
        height: 100%;
        font-size: 14px;
        color: #666;
      }
      .left {
        float: left;
        .tip {
          font-size: 12px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(246, 70, 101, 1);
        }
      }
      .right {
        float: right;
      }
    }
    .bottom {
      padding-top: 15px;
      display: flex;
      min-height: 120px;
      .left {
        background-color: #ccc;
        float: left;
        flex: 1;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        position: relative;
        float: right;
        min-height: 100%;
        background: rgba(204, 204, 204, 0.1);
        flex: 2;
        .content {
          width: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-align: center;
          h3 {
            font-size: 17px;
            font-weight: bold;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          p {
            font-size: 14px;
          }
        }
      }
    }
    .delete-btn {
      width: 97px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      display: block;
      border-radius: 15px;
      border: 1px solid rgba(151, 151, 151, 1);
      float: right;
      margin: 15px 0 0;
    }
    .cancel-btn {
      width: 97px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      display: block;
      border-radius: 15px;
      border: 1px solid rgba(151, 151, 151, 1);
      float: left;
      position: absolute;
      right: 40%;
      margin: 15px 0 0;
    }
  }

  .section2,
  .section3 {
    .section-item {
      min-height: 50px;
      line-height: 50px;
      border-bottom: 1px solid rgba(204, 204, 204, 0.2999);
      display: flex;
      position: relative;
      .left {
        flex: 5.5;
        text-align: justify;
        text-align-last: justify;
      }
      .right {
        flex: 7;
      }

      .member {
        position: absolute;
        right: 5px;

        span {
          background-color: #7d3a3a;
          color: #fff;
          border-radius: 6px;
          padding: 2px 4px;
        }
      }
    }
    .remark {
      margin-bottom: 10px;
      .title {
        font-size: 17px;
        font-family: "PingFangSC-Medium";
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
        line-height: 50px;
      }
      .notice {
        width: 345px;
        min-height: 120px;
        border: 1px solid rgba(204, 204, 204, 0.2996);
        font-size: 17px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 24px;
        padding: 10px;
        box-sizing: border-box;
      }
      .notice1 {
        width: 345px;
        min-height: 120px;
        border: 1px solid rgba(204, 204, 204, 0.2996);
        padding: 12px 13px;
        font-size: 14px;
        color: #666;
        font-family: "PingFangSC-Regular, PingFang SC";
        font-weight: 400;
        line-height: 20px;
        box-sizing: border-box;
      }
    }
  }

  .section3 {
    .cube-checkbox-group {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
  }

  //字体颜色
  .red-font {
    color: rgba(255, 56, 62, 1);
  }
  .orange-font {
    color: rgba(255, 126, 27, 1);
  }
}
</style>

<style lang="less">
.booking-detail {
  .booking-detail .cube-checkbox-ui {
    background-color: #fff !important;
  }
  .cube-checkbox .cubeic-square-right {
    color: #fff !important;
  }
  .cube-checkbox_checked .cubeic-square-right {
    color: #ccc !important;
  }

  .border-bottom-1px::after,
  .border-top-1px::before {
    display: none !important;
  }
}
.queenCardLogo {
  position: absolute;
  right: 0;
}
// .queenCardLogoItem {
//   font-size: 14px;
//   float: right;
//   display: block;
//   height: 25px;
//   // background: #ff84a5;
//   line-height: 25px;
//   color: white;
//   padding: 2px 8px;
//   border-radius: 14px;
//   margin-top: 12px;
// }
.queenCardLogoItem {
  max-width: 68px;
  font-size: 14px;
  float: right;
  display: block;
  height: 25px;
  background: #ff84a5;
  line-height: 25px;
  text-align: center;
  color: white;
  padding: 2px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 12px;
  margin-top: 12px;
  box-sizing: border-box;
}
.heights {
  height: 240px;
}
.frs {
  right: 4% !important;
}
.queenCardLogoItem1 {
  background: #fb309b;
}
.queenCardLogoItem2 {
  background: #fe6b2d;
}
.queenCardLogoItem3 {
  background: #b025e9;
}
.cardbtns {
  position: absolute;
  right: 0px;
  // max-width: 68px;
  // min-width: 200px;
  height: 25px;
  line-height: 25px;
  border-radius: 12px;
  text-align: center;
  padding: 2px 6px;
  font-size: 14px;
  color: #fff;
  background: #ff84a5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 12px;
  box-sizing: border-box;
}
</style>



